<template>
	<view class="container">
		<image class="logo" :src="static+'/logo.png'"></image>
		<view class="form_unit">
			<view class="form_label">+86</view>
			<input class="inputtext" type="number" data-name="phone" @input="input_" placeholder="请输入登录用手机号码"/>
		</view>
		<view class="form_unit">
			<input class="verify_input" type="number" :value="verify" data-name="verify" @input="input_" placeholder="请输入验证码"/>
			<view class="number" v-on:click="get_verify_code" v-if="second==60">{{number}}</view>
			<view class="number_" v-else>{{number}}</view>
		</view>
		<view class="operate_login">
			<view class="login_button" v-on:click="login_submit">确认登录</view>
		</view>
		<!-- <view class="service">辽宁泓莱鑫科技有限公司  出品</view> -->
	</view>
</template>
<style>
	page{background: #F5F5F5;}
	.container{background: #F5F5F5;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}
	.logo{width:200upx;height:200upx;margin-top:200upx;}
	.form_unit{width: 75%;margin:10upx 12.5%;border-bottom: 1px solid #e5e5e5;display: flex;justify-content: space-between;align-items: center;height: 80upx;}
	.form_label{width:30%;font-size: 28upx;color: #282828;text-align: center;border-right: 1px solid #e5e5e5;}
	.inputtext{font-size: 28upx;text-align: left;width: 65%;color: #282828;}
	.verify_input{font-size: 26upx;text-align: center;width: 45%;color: #282828;}
	.number{width:35%;height: 60upx;line-height: 60upx;font-size: 24upx;background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 10upx;text-align: center;color: #FFFFFF;}
	.number_{width:35%;height: 60upx;line-height: 60upx;font-size: 24upx;border:1px solid #E5E5E5;border-radius: 10upx;text-align: center;color: #E5E5E5;}
	.operate_login{width: 75%;margin:100upx 12.5% 0 12.5%;height: 80upx;display: flex;justify-content: center;align-items: center;}
	.login_button{width:96%;height: 80upx;font-size: 28upx;line-height: 80upx;background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;border-radius: 40upx;text-align: center;}
	.wechat_button{width:48%;height: 80upx;font-size: 26upx;border-radius: 40upx;display: flex;justify-content: center;align-items: center;color: #282828;text-decoration: underline;}

	.service{font-size: 24upx;width:100%;text-align: center;position: fixed;bottom: 20upx;color: #282828;}
</style>
<script>
	export default {
		data() {
			return {
				phone:'',
				password:'',
				again:'',
				timer :'',
				second:60,
				verify:'',
				number:'获取验证码',
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad() {

		},
		methods: {
			get_verify_code:function(){
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!reg_tel.test(this.phone))
				{
					uni.showToast({
						title:'不是有效的手机号码',
						duration:1000
					})
				}
				else
				{
					if(this.second==60)
					{
						uni.request({
							url: this.url+"/wechat_get_msm_code",
							data: {phone:this.phone},
							header: {
							  'Content-Type': 'application/json'
							},
							success: function (res) 
							{
								console.log(res);
							}
						})
					}
					var that = this;
					this.timer = setInterval(()=>{
						if(that.second>0)
						{
							that.second--;
							that.number = that.second+"秒后再获取";
						}
						else
						{
							that.second = 60;
							that.number = "获取验证码";
							clearInterval(that.timer);
							that.timer = null;
						}
					},1000)
				}
			},
			login_submit:function()
			{
				if(this.verify.length<6)
				{
					uni.showToast({
						title:'验证码错误',
						duration:1000
					})
				}
				else
				{
					var that = this;
					uni.request({
						url: this.url+'/wechat_member_verify_login', 
						method:"POST",
						data: {phone:this.phone,verify:this.verify},
						header: {'Content-Type': 'application/x-www-form-urlencoded'},
						success: (res) => {
							console.log(res.data);
							if(res.data.status==1)
							{
								that.st = 1;
								uni.showToast({
									title:"登录成功",
									duration:2000
								})
								uni.setStorageSync("member_id",res.data.result[0].member_id);
								uni.setStorageSync("grade",res.data.result[0].grade);
								uni.reLaunch({url:'/pages/member/index'});
							}
							else
							{
								uni.showModal({
									title:"操作提示",
									content:res.data.msg,
									showCancel:false
								})
							}
						}
					});
				}
				
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="verify")
				{
					this.verify   = e.detail.value;
				}
				if(e.currentTarget.dataset.name=="phone")
				{
					this.phone = e.target.value;
				}
			}
			
		}
	}
</script>


